<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的</title>
		<link rel="stylesheet" href="css/home-style.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/my.js"></script>
	<style type="text/css">
		.icon_1{
			width: 25px;
			/*float: right;*/
			cursor: pointer;
		}
		.icon_2{
			width: 23px;
			/*float: right;*/
			cursor: pointer;
		}
		#music_list{
		}
		
		th{
			width: 400px;
			background-color: #F0F0F0;
			color: black;
			height: 30px;
			border-color: #F0F0F0;
			border-bottom:1px solid #F0F0F0
			
		}
		tr{
			height: 30px;
			font-size: 10px;
			
		}
		
		.tr2{
			background-color:#F0F0F0;
			border-color: #F0F0F0;
		}
		.td1,.th1{
			width: 60px;
			color: black;
		}
		.th2{
			width: 600px;
			color: black;
		}
		.td_img{
			width: 150px;
			color: black;
		}
		.th3{
			width: 400px;
			color: black;
		}
		.th4{
			width: 50px;
			color: black;
			
		}
		/*td{
			text-align: left;
		}*/
		table{
			text-align: left;
			color: black;
			border-collapse:collapse;
			
		}
		#ta1{
			/*border:1px solid #808080;*/
		}
		.chick1{
			background: rgba(0,0,0,0);
		}
	</style>
	</head>
	<body>

		<div class="A" style="height: 89px; ">
			<div class="a">
				<div class="a1">
					<div class="a11">
						<a href="index.jsp"><img class="logo" src="images/logo.png" alt="logo"></a>
					</div>
					<div class="a12">
						<ul>
							<li style="background-color: #31c27c"><a href="javascript:void(0)" title="音乐馆" style="color: white">音乐馆</a>
							</li>
							<li><a href="javascript:void(0)">我的音乐</a></li>
							<li><a href="javascript:void(0)">客户端</a></li>
							<li><a href="javascript:void(0)">音乐号</a></li>
							<li><a href="javascript:void(0)">VIP</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="outer2 updiv">
		    <input type="file" class="upload"  >
			<img src="${sessionScope.user.headImage}" id="image0" class="headImage" />
			<p class="txt1">
				UID：${sessionScope.user.uid}
				<img src="images/green.png" style="margin-top: 10px;">
			</p>
			<br />
			<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;
			<span id="change2">
				我的信息
			</span>
			<span id="change">
				我的收藏
			</span>
		</div>

		<div id="myCol" style="display:none;">
			<a class="a142" id="allpaly" onclick="playAll()" href="javascript:void(0)" >批量播放</a>
			<a class="a142" href="javascript:void(0)" >添加到</a>
			<a class="a142" href="javascript:void(0)" onclick="downloadAll();" >批量下载</a>
			<a class="a142" href="javascript:void(0)" onclick="delAll();">批量删除</a><br /><br /><br /><br />
			<div id="music_list">
				<table id="ta1">
					<tr>
						<th class="th1"></th>
						<th class="th2">歌曲</th>
						<th class="td_img"></th>
						<th class="th3">歌手</th>
						<th class="th3">专辑</th>
						<th class="th4">时长</th>
					</tr>
				</table>
				<table id="ta2">		
				<c:forEach var="music"  items="${sessionScope.listF}">
				<tr class="tr${sessionScope.count}"  onmousemove="change_5('t${music.mid}');"onmouseout="change_6('t${music.mid}')">
					<td class="td1" id="w${music.mid}"><input type="checkbox" name="" id="c${music.mid}" class="chick1" value="" /></td>
					<td class="th2">${music.name}</td>
					<td class="td_img" id="t${music.mid}"><img  style="display: none;"  src="icon/播放.png" onclick="play('p${music.mid}');" id="p${music.mid}" class="icon_1" onmousemove="change_1('p${music.mid}');"onmouseout="change_2('p${music.mid}')">
					<img style="display: none;" src="icon/下载 (1).png" onclick="download('l${music.mid}');" id="l${music.mid}" class="icon_2" onmousemove="change_3('l${music.mid}');"onmouseout="change_4('l${music.mid}')">
					<img style="display: none;" src="icon/删除-填充.png" onclick="del('d${music.mid}');" id="d${music.mid}" class="icon_2" onmousemove="change_7('d${music.mid}');"onmouseout="change_8('d${music.mid}')"></td>
					<td class="th3">${music.singer}</td>
					<td class="th3">${music.album}</td>
					<td class="th4">${music.time}</td>
					<%
						if((int)session.getAttribute("count")==1)
						{
							session.setAttribute("count",2);
						}
						else{
							session.setAttribute("count",1);
						}
					%>
				</tr>
						
						
          		</c:forEach>
				</table>


			
			
			
			
			</div>
		</div>
		<div id="myInf" style="">
		
		<div id="inf1" style="">
			<h1>个人信息</h1>
			<img class="heI" src="${sessionScope.user.headImage}" >
			<p>UID：${sessionScope.user.uid}</p>
			<p>账号：${sessionScope.user.username}</p>
			<p>Email：${sessionScope.user.email}</p>
			<p>性别：${sessionScope.user.gender}</p>
			<p>个人信息：${sessionScope.user.info}</p>
			<button type="button" id="change3">修改信息</button>
		</div>
		<div id="inf2" style="display:none ;" class="updiv">
			<h1>个人信息修改</h1>
			<form method="post"  action="">
			<input type="file" id="file2" class="upload2"  name="spicture">
			<img src="${sessionScope.user.headImage}" id="image1" class="heI" />
			
			<input type="button"  onclick="postData();" style="float: right;" value="变更头像">
			</form>
			
			<form method="post"  action="changeinfo">
			
			   <p>
				姓  名：<input value="${sessionScope.user.username}" type="text" class="textinput"  id="username" name="username" onkeyup="checkUsername();" >
				<span id="usernameMsg" style="font-size: 10px;"></span><font style="font-size: 10px;" color="#999999">字母数字下划线7到16位, 不能是数字开头</font>
			   <p>
			   <p>
			        密  码：<input value="${sessionScope.user.password}" type="password" class="textinput"  id="password" name="password" onkeyup="checkPassword();">
			    <span id="passwordMsg" style="font-size: 10px;"></span><font style="font-size: 10px;" color="#999999">密码请设置6-16位字符</font>
				<p>
				<p>
				重复密码：<input type="password" class="textinput" value="${sessionScope.user.password}" id="repassword" name="repassword" onkeyup="checkConfirm();"/>
				<span id="confirmMsg" style="font-size: 10px;"></span>
				<p>
				<p>
				性  别: <input type="radio"  name="gender"  checked="checked" value="男">男
			       <input type="radio"  name="gender" value="女">女</p>  
			   <p>
			   <p>Email：<input type="text" value="${sessionScope.user.email}"  class="textinput"  id="email" name="email" onkeyup="checkEmail();" >
			   <span id="emailMsg" style="font-size: 10px;"></span><font style="font-size: 10px;" color="#999999">请输入有效的邮箱地址</font>
			   <p>
			   <p>info:  <textarea class="textarea" name="introduce" value="${sessionScope.user.info}"></textarea>
			   <p>
			   <input type="submit" value="修改信息">
			     <input type="reset"value="重置"> &nbsp;&nbsp;
			     <input type="button" value="返回" id="change4">
			   </p>
			</form>
		</div>
		</div>

	</body>
</html>
    